<template>
  <div class="detail-container" v-if="goods">
    <img class="cover" :src="goods.image_url" :alt="goods.name" />
    <div class="content">
      <div class="name">{{ goods.name }}</div>
      <div class="price">¥{{ goods.price }}</div>
      <div class="stock">库存：{{ goods.stock }}</div>
      <div class="desc">{{ goods.description }}</div>

      <div class="qty">
        <button type="button" class="step-btn" @click.stop.prevent="dec" @pointerdown.stop.prevent="dec">-</button>
        <input type="number" v-model.number="count" min="1" :max="goods.stock" @change="normalize" />
        <button type="button" class="step-btn" @click.stop.prevent="inc" @pointerdown.stop.prevent="inc">+</button>
      </div>

      <button class="add-btn" @click="addToCart">加入购物车</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import axios from '@/api'

const route = useRoute()
const goods = ref(null)
const count = ref(1)

const loadDetail = async () => {
  const id = route.params.id
  const res = await axios.get(`/goods/${id}`)
  goods.value = res.data
  count.value = 1
}

const normalize = () => {
  const n = Number(count.value)
  if (!Number.isFinite(n) || n < 1) {
    count.value = 1
  }
}

const dec = () => {
  normalize()
  if (count.value > 1) count.value--
}
const inc = () => {
  normalize()
  if (!goods.value) return
  if (count.value < goods.value.stock) count.value++
}

const addToCart = () => {
  const cart = JSON.parse(localStorage.getItem('cart') || '[]')
  const idx = cart.findIndex(i => i.id === goods.value.id)
  if (idx >= 0) {
    const newQty = Math.min(goods.value.stock, cart[idx].qty + count.value)
    cart[idx].qty = newQty
  } else {
    cart.push({ id: goods.value.id, name: goods.value.name, price: goods.value.price, image_url: goods.value.image_url, qty: count.value, stock: goods.value.stock })
  }
  localStorage.setItem('cart', JSON.stringify(cart))
  alert('加入购物车成功')
}

onMounted(loadDetail)
</script>

<style scoped>
.detail-container { width:100vw; min-height:100vh; background:#f7f7f7; }
.cover { width:100%; height:260px; object-fit:cover; background:#eee; }
.content { padding:14px; background:#fff; margin-top:-10px; border-radius:12px 12px 0 0; }
.name { font-size:18px; font-weight:700; color:#333; margin-bottom:6px; }
.price { color:#ff4757; font-size:18px; font-weight:700; margin:6px 0; }
.stock { color:#999; font-size:12px; }
.desc { color:#666; font-size:14px; line-height:1.6; margin:10px 0 16px; }
.qty { display:flex; align-items:center; gap:10px; }
.qty .step-btn { width:36px; height:36px; border:1px solid #ddd; background:#fff; border-radius:6px; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; user-select:none; }
.qty input { text-align:center; }
.qty input { width:60px; height:32px; border:1px solid #ddd; border-radius:6px; padding:0 6px; }
.add-btn { width:100%; height:44px; background:#ff4757; color:#fff; border:none; border-radius:8px; margin-top:16px; font-weight:700; }
</style>


